<template>
  <div class="DataStatistic">
    <!-- 设置容器 -->
    <!-- 中国地图 -->
    <div id="china_map" style="height: 600px"></div>
    <!-- 湖南省地图 -->
    <div id="hunan_map" style="height: 600px"></div>
  </div>
</template>

<script>
import china_covid from "../assets/china_covid.json";
export default {
  data() {
    return {
      china_covid,
    };
  },
  mounted() {
    //自动加载地图
    this.loadChinaMap();
    this.loadHunanMap();
  },
  methods: {
    // 加载中国地图
    loadChinaMap() {
      // 初始化图表
      new Highcharts.Map("china_map", {
        title: {
          text: "国内疫情现有确诊分布",
        },
        colorAxis: {
          // 设置每个区间的颜色
          dataClasses: [
            {
              color: "#FFE1B3",
              to: 10,
            },
            {
              // 颜色值
              color: "#FDCFA7",
              // 从哪开始
              from: 10,
              // 到哪结束
              to: 100,
            },
            {
              color: "#FBB998",
              from: 100,
              to: 1000,
            },
            {
              color: "#FAA68A",
              from: 1000,
              to: 5000,
            },
            {
              color: "#F8947D",
              from: 5000,
              to: 10000,
            },
            {
              color: "#F57669",
              from: 10000,
              to: 50000,
            },
            {
              color: "#F2544E",
              from: 50000,
              to: 100000,
            },
          ],
        },
        series: [
          {
            data: this.china_covid.list,
            name: "现有确诊",
            mapData: Highcharts.maps["cn/china"],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
      });
    },
    // 加载湖南省地图
    loadHunanMap() {
      // 过滤数据
      let hunanData = this.china_covid.list.filter(item => {
        return item.name === '湖南'
      })
      let hunanRes = hunanData[0].city.map(item => {
        return{
          name: item.name,
          value: item.conNum
        }
      })
      console.log(hunanRes);
      // 随机数据
 
     
      // 初始化图表
      new Highcharts.Map("hunan_map", {
        title: {
          text: "湖南省疫情现有确诊分布",
        },
        colorAxis: {
          // 设置每个区间的颜色
          dataClasses: [
            {
              color: "#FFE1B3",
              to: 10,
            },
            {
              // 颜色值
              color: "#FDCFA7",
              // 从哪开始
              from: 10,
              // 到哪结束
              to: 100,
            },
            {
              color: "#FBB998",
              from: 100,
              to: 1000,
            },
            {
              color: "#FAA68A",
              from: 1000,
              to: 5000,
            },
            {
              color: "#F8947D",
              from: 5000,
              to: 10000,
            },
            {
              color: "#F57669",
              from: 10000,
              to: 50000,
            },
            {
              color: "#F2544E",
              from: 50000,
              to: 100000,
            },
          ],
        },
        series: [
          {
            data: hunanRes,          
            name: "现有确诊",
            mapData: Highcharts.maps["cn/hunan"],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
</style>
